<template>
<div :style="{background: color}" class="survey">
  <van-swipe @change="onChange" :touchable='false' ref="go">
    <template #indicator>
      <div class="custom-indicator">
        <span class="sp">{{ count + 1 }}/{{list.length}}</span>
      </div>
    </template>
    <div v-for="(v,i) in list" :key='v'>
      <van-swipe-item>{{v}}</van-swipe-item>
    </div>
  </van-swipe>
  <ul v-for="(item,index) in issue" :key='index'>
    <li @click="xxx">{{item}}</li>
  </ul>
</div>
</template>

<script>
import {
  Dialog
} from 'vant';
export default {
  data() {
    return {
      count: 0,
      list: ['偶尔睡得不好，第二天上班就受不了，总想继续睡。', '出行坐飞机起飞降落时感到耳痛、头痛。', '出行时行走一段路，就觉得腿疼脚痛。', '因急事跑步，很容易上气不接下气。', '生物钟被打乱时就非常难受。', '体检时医生已给出严重的的警告。', '站不了多久，就支持不住，很想坐下或躺下。', '蹲一会儿，就脚麻眼花、心悸气急。', '坐了一段时间，就想倚靠。', '经常性的便秘。'],
      issue: ['A ：没有', 'B ：有,但程度浅', 'C ：有,程度深', 'D ：有'],
      color: this.$route.query.color,
      title: this.$route.query.title
    }
  },
  methods: {
    onChange(index) {
      this.count = index;
    },

    xxx() {
      if (this.count < 9) {
        this.$refs.go.next();
        this.count++
      } else {
        Dialog.confirm({
            title: '标题',
            message: '是否确认提交'
          })
          .then(() => {
            this.$router.push({
              path: '/healthSurvey/surveyResult',
              query: {
                color: this.color,
                title: this.title
              }
            })
          })
          .catch(() => {});
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.survey {
  width: 100%;
  height: 100%;
}

.sp {
  width: 80px;
  height: 20px;
  margin-left: 140px;
  line-height: 20px;
  border-radius: 10%;
  background: rgba(0, 0, 0, 0.5);
  margin-bottom: 20px;
}
</style>
